<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="rightSiebar">
<div class="fixed-sidebar right" th:if="${session.loginUser != null}"  id="friends-list">
    <!--右侧bar-->
    <div class="fixed-sidebar-right sidebar--small" id="sidebar-right">
        <div class="mCustomScrollbar" data-mcs-theme="dark">
            <ul class="chat-users" id="chat-users-small">
                <li class="inline-items js-chat-open" v-for="message in messages">
                    <div class="author-thumb" v-if="message.imagePath == null">
                        <img :src="message.aUserInfo.imagePath"
                             style="width: 34px; height: 34px" class="avatar" onerror="this.src='img/avatar1.jpg'">
                        <p class="d-none">{{message.A}}</p>
                        <div v-if="message.aUserInfo.status == 0">
                            <span class="icon-status disconected"></span>
                        </div>
                        <div v-else-if="message.aUserInfo.status == 1">
                            <span class="icon-status online"></span>
                        </div>
                        <div v-else-if="message.aUserInfo.status == 2">
                            <span class="icon-status away"></span>
                        </div>
                        <div v-else-if="message.aUserInfo.status == 3">
                            <span class="icon-status status-invisible"></span>
                        </div>
                    </div>
                    <div class="author-thumb" v-else>
                        <img alt="author" :src="message.imagePath" style="width: 34px; height: 34px"
                             class="avatar" onerror="this.src='img/avatar1.jpg'">
                        <p class="d-none" >{{message.userName}}</p>
                        <div v-if="message.status == 0">
                            <span class="icon-status disconected"></span>
                        </div>
                        <div v-else-if="message.status == 1">
                            <span class="icon-status online"></span>
                        </div>
                        <div v-else-if="message.status == 2">
                            <span class="icon-status away"></span>
                        </div>
                        <div v-else-if="message.status == 3">
                            <span class="icon-status status-invisible"></span>
                        </div>
                    </div>
                </li>
                <!--<li class="inline-items js-chat-open" th:each="friend:${session.friends}">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar67-sm.jpg" class="avatar">
                        <p th:text="${friend.userName}" class="d-none"></p>
                        <span class="icon-status online"></span>
                    </div>
                </li>-->
                <!--<li class="inline-items js-chat-open">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar62-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>
                </li>

                <li class="inline-items js-chat-open">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar68-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>
                </li>

                <li class="inline-items js-chat-open">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar69-sm.jpg" class="avatar">
                        <span class="icon-status away"></span>
                    </div>
                </li>

                <li class="inline-items js-chat-open">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar70-sm.jpg" class="avatar">
                        <span class="icon-status disconected"></span>
                    </div>
                </li>
                <li class="inline-items js-chat-open">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar64-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>
                </li>
                <li class="inline-items js-chat-open">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar71-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>
                </li>
                <li class="inline-items js-chat-open">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar72-sm.jpg" class="avatar">
                        <span class="icon-status away"></span>
                    </div>
                </li>
                <li class="inline-items js-chat-open">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar63-sm.jpg" class="avatar">
                        <span class="icon-status status-invisible"></span>
                    </div>
                </li>
                <li class="inline-items js-chat-open">
                    <div class="author-thumb">
                        <img alt="author" src="img/avatar72-sm.jpg" class="avatar">
                        <span class="icon-status away"></span>
                    </div>
                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar71-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>
                </li>-->
            </ul>
        </div>
        <div class="search-friend inline-items">
            <a href="#" class="js-sidebar-open">
                <svg class="olymp-menu-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                </svg>
            </a>
        </div>
        <a href="#" class="olympus-chat inline-items ">
            <svg class="olymp-chat---messages-icon">
                <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
            </svg>
        </a>
    </div>

    <div class="fixed-sidebar-right sidebar--large" id="sidebar-right-1">

        <div class="mCustomScrollbar" data-mcs-theme="dark">

            <div class="ui-block-title ui-block-title-small">
                <a href="#" class="title">Close Friends</a>
                <a href="#">设置</a>
            </div>

            <ul class="chat-users" id="chat-users-large">
                <li class="inline-items js-chat-open" v-for="message in messages">
                    <div class="author-thumb" v-if="message.imagePath == null">
                        <img :src="message.aUserInfo.imagePath"
                             style="width: 34px; height: 34px" class="avatar" onerror="this.src='img/avatar1.jpg'">
                        <p class="d-none">{{message.A}}</p>
                        <div v-if="message.aUserInfo.status == 0">
                            <span class="icon-status disconected"></span>
                        </div>
                        <div v-else-if="message.aUserInfo.status == 1">
                            <span class="icon-status online"></span>
                        </div>
                        <div v-else-if="message.aUserInfo.status == 2">
                            <span class="icon-status away"></span>
                        </div>
                        <div v-else-if="message.aUserInfo.status == 3">
                            <span class="icon-status status-invisible"></span>
                        </div>
                    </div>
                    <div class="author-thumb" v-else>
                        <img alt="author" :src="message.imagePath" style="width: 34px; height: 34px"
                             class="avatar" onerror="this.src='img/avatar1.jpg'">
                        <p class="d-none" >{{message.userName}}</p>
                        <div v-if="message.status == 0">
                            <span class="icon-status disconected"></span>
                        </div>
                        <div v-else-if="message.status == 1">
                            <span class="icon-status online"></span>
                        </div>
                        <div v-else-if="message.status == 2">
                            <span class="icon-status away"></span>
                        </div>
                        <div v-else-if="message.status == 3">
                            <span class="icon-status status-invisible"></span>
                        </div>
                    </div>
                    <div class="author-status">
                        <a href="#" class="h6 author-name">
                            <span v-if="message.userName != null">{{message.userName}}</span>
                            <span v-else>{{message.A}}</span>
                        </a>
                        <div v-if="message.imagePath != null">
                            <div v-if="message.status == 0">
                                <span class="status">离线</span>
                            </div>
                            <div v-else-if="message.status == 1">
                                <span class="status">在线</span>
                            </div>
                            <div v-else-if="message.status == 2">
                                <span class="status">离开</span>
                            </div>
                            <div v-else-if="message.status == 3">
                                <span class="status">离线</span>
                            </div>
                        </div>
                        <div v-else>
                            <div v-if="message.aUserInfo.status == 0">
                                <span class="status">离线</span>
                            </div>
                            <div v-else-if="message.aUserInfo.status == 1">
                                <span class="status">在线</span>
                            </div>
                            <div v-else-if="message.aUserInfo.status == 2">
                                <span class="status">离开</span>
                            </div>
                            <div v-else-if="message.aUserInfo.status == 3">
                                <span class="status">离线</span>
                            </div>
                        </div>
                    </div>
                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>
                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>
                    </div>
                </li>
                <!-- <li class="inline-items js-chat-open">

                     <div class="author-thumb">
                         <img alt="author" src="img/avatar62-sm.jpg" class="avatar">
                         <span class="icon-status online"></span>
                     </div>

                     <div class="author-status">
                         <a href="#" class="h6 author-name">Mathilda Brinker</a>
                         <span class="status">AT WORK!</span>
                     </div>

                     <div class="more">
                         <svg class="olymp-three-dots-icon">
                             <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                         </svg>

                         <ul class="more-icons">
                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                     </use>
                                 </svg>
                             </li>

                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="ADD TO CONVERSATION"
                                      class="olymp-add-to-conversation-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                     </use>
                                 </svg>
                             </li>

                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                     </use>
                                 </svg>
                             </li>
                         </ul>

                     </div>

                 </li>

                 <li class="inline-items js-chat-open">


                     <div class="author-thumb">
                         <img alt="author" src="img/avatar68-sm.jpg" class="avatar">
                         <span class="icon-status online"></span>
                     </div>

                     <div class="author-status">
                         <a href="#" class="h6 author-name">Carol Summers</a>
                         <span class="status">ONLINE</span>
                     </div>

                     <div class="more">
                         <svg class="olymp-three-dots-icon">
                             <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                         </svg>

                         <ul class="more-icons">
                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                     </use>
                                 </svg>
                             </li>

                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="ADD TO CONVERSATION"
                                      class="olymp-add-to-conversation-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                     </use>
                                 </svg>
                             </li>

                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                     </use>
                                 </svg>
                             </li>
                         </ul>

                     </div>


                 </li>

                 <li class="inline-items js-chat-open">


                     <div class="author-thumb">
                         <img alt="author" src="img/avatar69-sm.jpg" class="avatar">
                         <span class="icon-status away"></span>
                     </div>

                     <div class="author-status">
                         <a href="#" class="h6 author-name">Michael Maximoff</a>
                         <span class="status">AWAY</span>
                     </div>

                     <div class="more">
                         <svg class="olymp-three-dots-icon">
                             <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                         </svg>

                         <ul class="more-icons">
                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                     </use>
                                 </svg>
                             </li>

                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="ADD TO CONVERSATION"
                                      class="olymp-add-to-conversation-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                     </use>
                                 </svg>
                             </li>

                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                     </use>
                                 </svg>
                             </li>
                         </ul>

                     </div>


                 </li>

                 <li class="inline-items js-chat-open">


                     <div class="author-thumb">
                         <img alt="author" src="img/avatar70-sm.jpg" class="avatar">
                         <span class="icon-status disconected"></span>
                     </div>

                     <div class="author-status">
                         <a href="#" class="h6 author-name">Rachel Howlett</a>
                         <span class="status">OFFLINE</span>
                     </div>

                     <div class="more">
                         <svg class="olymp-three-dots-icon">
                             <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                         </svg>

                         <ul class="more-icons">
                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                     </use>
                                 </svg>
                             </li>

                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="ADD TO CONVERSATION"
                                      class="olymp-add-to-conversation-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                     </use>
                                 </svg>
                             </li>

                             <li>
                                 <svg data-toggle="tooltip" data-placement="top"
                                      data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                     <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                     </use>
                                 </svg>
                             </li>
                         </ul>

                     </div>


                 </li>-->
            </ul>


            <!--<div class="ui-block-title ui-block-title-small">
                <a href="#" class="title">MY FAMILY</a>
                <a href="#">设置</a>
            </div>

            <ul class="chat-users">
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar64-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Sarah Hetfield</a>
                        <span class="status">ONLINE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>
                </li>
            </ul>


            <div class="ui-block-title ui-block-title-small">
                <a href="#" class="title">UNCATEGORIZED</a>
                <a href="#">设置</a>
            </div>

            <ul class="chat-users">
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar71-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Bruce Peterson</a>
                        <span class="status">ONLINE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>


                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar72-sm.jpg" class="avatar">
                        <span class="icon-status away"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Chris Greyson</a>
                        <span class="status">AWAY</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>

                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar63-sm.jpg" class="avatar">
                        <span class="icon-status status-invisible"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Nicholas Grisom</a>
                        <span class="status">INVISIBLE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar72-sm.jpg" class="avatar">
                        <span class="icon-status away"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Chris Greyson</a>
                        <span class="status">AWAY</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar71-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Bruce Peterson</a>
                        <span class="status">ONLINE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>
                </li>
            </ul>-->

        </div>

        <div class="search-friend inline-items">
            <form class="form-group">
                <input class="form-control" placeholder="Search Friends..." value="" type="text">
            </form>

            <a href="accountSettings.html" class="settings">
                <svg class="olymp-settings-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-settings-icon"></use>
                </svg>
            </a>

            <a href="#" class="js-sidebar-open">
                <svg class="olymp-close-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                </svg>
            </a>
        </div>

        <a href="#" class="olympus-chat inline-items ">

            <h6 class="olympus-chat-title">OLYMPUS CHAT</h6>
            <svg class="olymp-chat---messages-icon">
                <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
            </svg>
        </a>

    </div>

</div>

<!-- Fixed Sidebar Right-Responsive -->

<div class="fixed-sidebar right fixed-sidebar-responsive" id="sidebar-right-responsive">

    <div class="fixed-sidebar-right sidebar--small">
        <a href="#" class="js-sidebar-open">
            <svg class="olymp-menu-icon">
                <use xlink:href="svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
            </svg>
            <svg class="olymp-close-icon">
                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
            </svg>
        </a>
    </div>

    <div class="fixed-sidebar-right sidebar--large">
        <div class="mCustomScrollbar" data-mcs-theme="dark">

            <div class="ui-block-title ui-block-title-small">
                <a href="#" class="title">Close Friends</a>
                <a href="#">设置</a>
            </div>

            <ul class="chat-users">
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar67-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Carol Summers</a>
                        <span class="status">ONLINE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>

                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar62-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Mathilda Brinker</a>
                        <span class="status">AT WORK!</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>

                </li>

                <li class="inline-items js-chat-open">


                    <div class="author-thumb">
                        <img alt="author" src="img/avatar68-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Carol Summers</a>
                        <span class="status">ONLINE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>


                </li>

                <li class="inline-items js-chat-open">


                    <div class="author-thumb">
                        <img alt="author" src="img/avatar69-sm.jpg" class="avatar">
                        <span class="icon-status away"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Michael Maximoff</a>
                        <span class="status">AWAY</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>


                </li>

                <li class="inline-items js-chat-open">


                    <div class="author-thumb">
                        <img alt="author" src="img/avatar70-sm.jpg" class="avatar">
                        <span class="icon-status disconected"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Rachel Howlett</a>
                        <span class="status">OFFLINE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>


                </li>
            </ul>


            <div class="ui-block-title ui-block-title-small">
                <a href="#" class="title">我的家</a>
                <a href="#">设置</a>
            </div>

            <ul class="chat-users">
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar64-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Sarah Hetfield</a>
                        <span class="status">ONLINE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>
                </li>
            </ul>


            <div class="ui-block-title ui-block-title-small">
                <a href="#" class="title">UNCATEGORIZED</a>
                <a href="#">设置</a>
            </div>

            <ul class="chat-users">
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar71-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Bruce Peterson</a>
                        <span class="status">ONLINE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>


                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar72-sm.jpg" class="avatar">
                        <span class="icon-status away"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Chris Greyson</a>
                        <span class="status">AWAY</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>

                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar63-sm.jpg" class="avatar">
                        <span class="icon-status status-invisible"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Nicholas Grisom</a>
                        <span class="status">INVISIBLE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar72-sm.jpg" class="avatar">
                        <span class="icon-status away"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Chris Greyson</a>
                        <span class="status">AWAY</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="inline-items js-chat-open">

                    <div class="author-thumb">
                        <img alt="author" src="img/avatar71-sm.jpg" class="avatar">
                        <span class="icon-status online"></span>
                    </div>

                    <div class="author-status">
                        <a href="#" class="h6 author-name">Bruce Peterson</a>
                        <span class="status">ONLINE</span>
                    </div>

                    <div class="more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>

                        <ul class="more-icons">
                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="START CONVERSATION" class="olymp-comments-post-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-comments-post-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="ADD TO CONVERSATION"
                                     class="olymp-add-to-conversation-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-add-to-conversation-icon">
                                    </use>
                                </svg>
                            </li>

                            <li>
                                <svg data-toggle="tooltip" data-placement="top"
                                     data-original-title="BLOCK FROM CHAT" class="olymp-block-from-chat-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-block-from-chat-icon">
                                    </use>
                                </svg>
                            </li>
                        </ul>

                    </div>
                </li>
            </ul>

        </div>

        <div class="search-friend inline-items">
            <form class="form-group">
                <input class="form-control" placeholder="Search Friends..." value="" type="text">
            </form>

            <a href="#" class="settings">
                <svg class="olymp-settings-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-settings-icon"></use>
                </svg>
            </a>

            <a href="#" class="js-sidebar-open">
                <svg class="olymp-close-icon">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                </svg>
            </a>
        </div>

        <a href="#" class="olympus-chat inline-items js-chat-open">

            <h6 class="olympus-chat-title">Molihub 聊天</h6>
            <svg class="olymp-chat---messages-icon">
                <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
            </svg>
        </a>
    </div>

</div>

<!-- ... end Fixed Sidebar Right-Responsive -->
</div>
</body>
</html>